import {PlusOutlined} from '@ant-design/icons';
import {
    ModalForm,
    ProForm,
    ProCard,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
} from '@ant-design/pro-components';
import {Button, Form, message, Popconfirm} from 'antd';
import type {DatePickerProps} from 'antd';
import {DatePicker, Space} from 'antd';
import {ProFormDateTimeRangePicker} from "@ant-design/pro-form";
import {ProFormDatePicker, ProFormTextArea} from "@ant-design/pro-form/lib";
import SingleUpload from "@/components/FileUpload";
import MultiUpload from "@/components/FileUpload/multi";
import {useEffect, useState} from "react";
import {addModel, modelDetail, updateModelStatus, updateModelInfo, modelList} from "@/services/chatter";
import moment from "moment";
import { useRef } from 'react';


// const {run: addnewModel} = useRequest(addModel, {
//     manual: true,
//     onSuccess: (res) => {
//         console.log("addLog", res);
//     }
// });

export default (props) => {
    if (!props) {
        return;
    }
    const {reloadTable, record} = props;
    const ref = useRef();
    const [data, setData] = useState([]);
    const [form] = Form.useForm<{ name: string; company: string }>();
    const [updateModalForm, setUpdateModalForm] = useState();
    useEffect(() => {
        modelList({modelCode: record.modelCode,showAllImages:1}).then(res => {
            setData(res.list[0])
        });
    }, [record.modelCode])

    return (
        <ModalForm<{
            name: string;
            company: string;
        }>
            title="Review"
            formRef={ref}
            visible={updateModalForm}
            onVisibleChange={(res)=>{
                setUpdateModalForm(res)
                // setData(props.record)
            }}
            trigger={
                <a type="primary" key={record.modelCode} onClick={() => {
                        // modelDetail({modelCode: record.modelCode}).then(res => {
                        //     setData(res)
                        //     formRef.reload()
                        // });

                    // modelList({modelCode: record.modelCode,showAllImages:1}).then(res => {
                    //             setData(res.list[0])
                    //             // formRef.current.reload()
                    //     });
                    //
                    }
                }>
                    Detail
                </a>
            }
            form={form}
            autoFocusFirstInput
            modalProps={{
                destroyOnClose: true,
                onCancel: () => console.log('run'),
            }}
            submitter={{
                render: (props, defaultDoms) => {
                    return [
                        <Popconfirm
                            title="Update approval status to Waiting"
                            description="Are you sure to Waiting the record?"
                            onConfirm={(e) => {
                                var params = {modelCode: record.modelCode, targetStatus: 0}
                                updateModelStatus(params).then(res => {
                                    message.success("Success");
                                    setUpdateModalForm(false)
                                    reloadTable();

                                })
                            }}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type={"primary"}>Waiting</Button>
                        </Popconfirm>,

                        <Popconfirm
                            title="Approval Pass"
                            description="Are you sure to Pass the record?"
                            onConfirm={(e) => {
                                var params = {modelCode: record.modelCode, targetStatus: 1}
                                updateModelStatus(params).then(res => {
                                    message.success("Success");
                                    setUpdateModalForm(false)
                                    reloadTable();

                                })
                            }}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type={"primary"}>Pass</Button>
                        </Popconfirm>,

                        <Popconfirm
                            title="Approval Reject"
                            description="Are you sure to Reject the record?"
                            onConfirm={(e) => {
                                var params = {modelCode: record.modelCode, targetStatus: 2}
                                updateModelStatus(params).then(res => {
                                    message.success("Success");
                                    setUpdateModalForm(false)
                                    reloadTable();
                                })
                            }}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type={"primary"}>Reject</Button>
                        </Popconfirm>,

                        ...defaultDoms,

                    ];
                },
            }}
            onFinish={async (values) => {
                // values.avatar = avatar;
                // values.photos = Array.from(photos);
                // values.publicAlbum = Array.from(publicAlbum);
                // values.privateAlbum = Array.from(privateAlbum);
                // console.log(values);
                // if (values.avatar == null) {
                //     message.error("avatar cant be null!!!")
                //     return false;
                // }
                //
                // if (values.photos.length == 0) {
                //     message.error("photos cant be null!!!")
                //     return false;
                // }
                // if (values.publicAlbum.length == 0) {
                //     message.error("publicAlbum cant be null!!!")
                //     return false;
                // }
                // if (values.modelType == '2' && privateAlbum.length == 0) {
                //     message.error("privateAlbum cant be null!!!")
                //     return false;
                // }

                values.modelUserCode = record.modelCode;
                updateModelInfo(values).then((res) => {
                    reloadTable();
                    message.success("success");
                    setUpdateModalForm(false)
                })
                return true;
            }}
        >

            <ProCard
                title="Basic Info"
                bordered
            >
                <ProForm.Group>

                    <ProFormText
                        width="md"
                        name="nickName"
                        label={"Name"}
                        rules={[{required: true}]}
                        initialValue={record.name}
                    />


                    <ProFormSelect
                        request={async () => [
                            {
                                value: 1,
                                label: 'male',
                            },
                            {
                                value: 2,
                                label: 'female',
                            }, {
                                value: 3,
                                label: 'others',
                            },
                        ]}
                        width="md"
                        name="gender"
                        label="Gender"
                        rules={[{required: true}]}
                        initialValue={data.gender}
                    />

                    <ProFormSelect
                        request={async () => [
                            {
                                value: 2,
                                label: 'CM',
                            },
                            {
                                value: 3,
                                label: 'M',
                            },

                        ]}
                        width="md"
                        name="modelType"
                        label="ModelType"
                        rules={[{required: true}]}
                        initialValue={data.modelType}
                    />

                    <ProFormDatePicker name="birthday" label="DOB" rules={[{required: true}]}
                                       initialValue={data.birthDay}
                    />
                    <ProFormSelect
                        request={async () => [
                            {
                                value: 1,
                                label: 'male',
                            },
                            {
                                value: 2,
                                label: 'female',
                            },
                            {
                                value: 3,
                                label: 'others',
                            },
                        ]}
                        width="md"
                        name="lookingFor"
                        label="Looking For"
                        rules={[{required: true}]}
                        initialValue={data.lookingFor}
                    />

                    <ProFormSelect
                        request={async () => [
                            {
                                value: 1,
                                label: 'Making new friends',
                            },
                            {
                                value: 2,
                                label: 'Seeking a long-term partner',
                            },
                            {
                                value: 3,
                                label: 'Looking for a dating partner',
                            },
                        ]}
                        width="md"
                        name="whyYouHere"
                        label="Why you here"
                        rules={[{required: true}]}
                        initialValue={data.target}
                    />
                    <ProFormSelect
                        fieldProps={{
                            mode: 'multiple',
                        }}
                        request={async () => [
                            {
                                value: '1',
                                label: 'Art',
                            },
                            {
                                value: '2',
                                label: 'Adventure',
                            },
                            {
                                value: '3',
                                label: 'Photography',
                            },
                            {
                                value: '4',
                                label: 'Pets',
                            },
                            {
                                value: '5',
                                label: 'Parties',
                            },
                            {
                                value: '6',
                                label: 'Theater',
                            },
                            {
                                value: '7',
                                label: 'Reading',
                            },
                            {
                                value: '8',
                                label: 'Exercise',
                            },
                            {
                                value: '9',
                                label: 'Music',
                            },
                            {
                                value: '10',
                                label: 'Games',
                            },
                            {
                                value: '11',
                                label: 'Outdoor',
                            },
                            {
                                value: '12',
                                label: 'Movies',
                            },
                            {
                                value: '13',
                                label: 'Traveling',
                            },
                            {
                                value: '14',
                                label: 'Fitness',
                            },
                        ]}
                        width="md"
                        name="interests"
                        label="Interests"
                        rules={[{required: true}]}
                        initialValue={data.interests}
                    />
                    <ProFormTextArea
                        width="md"
                        name="aboutMe"
                        label="About me"
                        rules={[{required: true}]}
                        initialValue={data.aboutMe}
                    />

                    <ProFormSelect
                        fieldProps={{
                            mode: 'multiple',
                        }}
                        request={async () => [
                            {
                                value: '1',
                                label: 'Kisses',
                            },
                            {
                                value: '2',
                                label: 'Bondage',
                            },
                            {
                                value: '3',
                                label: 'Blingfolding',
                            },
                            {
                                value: '4',
                                label: 'Breakfast',
                            },
                            {
                                value: '5',
                                label: 'Sexting',
                            },
                            {
                                value: '6',
                                label: 'Outdoors',
                            },
                            {
                                value: '7',
                                label: 'Biting',
                            },
                            {
                                value: '8',
                                label: 'Toys',
                            },
                            {
                                value: '9',
                                label: 'Busbes',
                            },
                            {
                                value: '10',
                                label: 'Home Video',
                            },
                            {
                                value: '11',
                                label: 'Group Fun',
                            },
                            {
                                value: '12',
                                label: 'Being watched',
                            },
                            {
                                value: '13',
                                label: 'Wax Play',
                            },
                            {
                                value: '14',
                                label: 'Cuckold',
                            },
                            {
                                value: '15',
                                label: 'Feet',
                            },
                            {
                                value: '16',
                                label: 'Dirty Talk',
                            },
                            {
                                value: '17',
                                label: 'I\'m a dom',
                            },
                            {
                                value: '18',
                                label: 'I\'m a sub',
                            },
                            {
                                value: '19',
                                label: 'Switch',
                            },
                            {
                                value: '20',
                                label: 'Scent',
                            },
                            {
                                value: '21',
                                label: 'Massage',
                            },
                            {
                                value: '22',
                                label: 'Striptease',
                            },
                            {
                                value: '23',
                                label: 'Dress up',
                            },
                            {
                                value: '24',
                                label: 'BDSM',
                            },

                        ]}
                        width="md"
                        name="turnOns"
                        label="TurnOns"
                        rules={[{required: false}]}
                        initialValue={data.turnOns}
                    />
                </ProForm.Group>
            </ProCard>
            <ProCard
                title="Photos Info"
                bordered
            >
                <ProForm.Group>
                    Avatar: <SingleUpload initValue={data.avatarUrl} setUrl={(avatarUrl) => {
                    setAvatar(avatarUrl);
                }}/>
                </ProForm.Group>
                <ProForm.Group>
                    Photos: <MultiUpload initValue={data.images} setUrl={(Url) => {
                    setPhotos(Url);
                }}/>
                </ProForm.Group>
            </ProCard>

            <ProCard
                title="Albums Info"
                bordered
            >
                <ProForm.Group>
                    Public Albums: <MultiUpload initValue={data.publicImages} setUrl={(urls) => {
                    setPublicAlbum(urls);
                    // setAvatar(avatarUrl);
                }}/>
                </ProForm.Group>
                <ProForm.Group>
                    Private Albums: <MultiUpload initValue={data.privateImages} setUrl={(urls) => {
                    setPrivateAlbum(urls);
                }}/>
                </ProForm.Group>
            </ProCard>

        </ModalForm>
    );
};